HTML CSS

# HTML Styles - CSS

« Previous
Next Chapter »

# CSS = Styles and Colors

Manipulate Text
Colors, Boxes

## Example

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »

## Styling HTML with CSS

CSS stands for Cascading Style Sheets

Styling can be added to HTML elements in 3 ways:

- Inline - using a style attribute in HTML elements
- Internal - using a <style> element in the HTML <head> section
- External - using one or more external CSS files

The most common way to add styling, is to keep CSS syntax in separate CSS files. But, in this tutorial, we use internal styling, because it is easier to demonstrate, and easier for you to try it yourself.

| You can learn much more about CSS in our CSS Tutorial.

## CSS Syntax

CSS styling has the following syntax:

element { property:value ; property:value }

The element is an HTML element name. The property is a CSS property. The value is a CSS value.

Multiple styles are separated with semicolon.

## Inline Styling (Inline CSS)

Inline styling is useful for applying a unique style to a single HTML element:

Inline styling uses the style attribute.

This inline styling changes the text color of a single heading:

## Example

<h1 style="color:blue">This is a Blue Heading</h1>
Try it Yourself »

## Internal Styling (Internal CSS)

An internal style sheet can be used to define a common style for all HTML elements on a page.

Internal styling is defined in the <head> section of an HTML page, using a <style> element:

## Example

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »

## External Styling (External CSS)

External style sheet are ideal when the style is applied to many pages.

With external style sheets, you can change the look of an entire site by changing one file.

External styles are defined in the <head> section of an HTML page, in the <link> element:

## Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »

## CSS Fonts

The CSS property color defines the text color to be used for an HTML element.

The CSS property font-family defines the font to be used for an HTML element.

The CSS property font-size defines the text size to be used for an HTML element.

## Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:blue;
font-family:verdana;
font-size:300%;
}
p {
color:red;
font-family:courier;
font-size:160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »

| The <font> tag, supported in older versions of HTML, is not valid in HTML5.

## The CSS Box Model

Every visible HTML element has a box around it, even if you cannot see it.

The CSS border property defines a visible border around an HTML element:

## Example

p {
border:1px solid black;
}
Try it Yourself »

The CSS padding property defines a padding (space) inside the border:

## Example

p {
border:1px solid black;
padding:10px;
}
Try it Yourself »

The CSS margin property defines a margin (space) outside the border:

## Example

p {
border:1px solid black;
padding:10px;
margin:30px;
}
Try it Yourself »

| The CSS examples above use px to define sizes in pixels (screen pixels).

## The id Attribute

All the examples above use CSS to style HTML elements in a general way.

The CSS styles define an equal style for all equal elements.

To define a special style for a special element, first add an id attribute to the element:

## Example

<p id="p01">I am different</p>

then define a different style for the (identified) element:

## Example

p#p01 {
color:blue;
}
Try it Yourself »

## The class Attribute

To define a style for a special type (class) of elements, add a class attribute to the element:

## Example

<p class="error">I am different</p>

Now you can define a different style for this type (class) of element:

## Example

p.error {
color:red;
}
Try it Yourself »

| Use id to address single elements. Use class to address groups of elements.

## Deprecated Tags and Attributes in HTML5

In older HTML versions, several tags and attributes were used to style documents.

These tags are not supported in HTML5.

Avoid using the elements: <font>, <center> and <strike>.

Avoid using the attributes: color and bgcolor.

## Chapter Summary

- Use the HTML style attribute for inline styling
- Use the HTML <style> element to define internal CSS
- Use the HTML <link> element to define external CSS
- Use the HTML <head> element to store <style> and <link> elements
- Use the CSS color property for text colors
- Use the CSS font-family property for text fonts
- Use the CSS font-size property for text sizes
- Use the CSS border property for visible element borders
- Use the CSS padding property for space inside the border
- Use the CSS margin property for space outside the border

## Test Yourself with Exercises!

Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »

## HTML Style Tags

Tag | Description
--- | ---
<style> | Defines style information for a document
<link> | Defines a link between a document and an external resource

« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples